<template>
    <div class="register-page">

      <div class="form">
        <el-card class="form-card">
          <h1>后台管理系统</h1>

          <a class="form-register" href="#/login">去登录</a>
          <!-- <el-button>去登录</el-button> -->
          <el-form :model="registerForm" :rules="registerRules" ref="registerForm">
            <el-form-item label="用户名" label-position="top" prop="username">
              <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-position="top" prop="password">
              <el-input v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="再次输入密码" label-position="top" prop="repassword">
              <el-input v-model="registerForm.repassword" placeholder="请再次输入密码"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      </div>
</template>

<script>
import { register } from '@/api/user'
export default {
  // data
  data () {
    const sameRule = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        return callback(new Error('两次密码不正确'))
      } else {
        callback()
      }
    }
    return {
      // 表单
      registerForm: {
        username: '',
        password: ''
      },

      // 表单规则
      registerRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-z]{1,}[0-9]{1,}$/, message: '用户名起码一个字母或数字', trigger: 'blur' },
          { min: 2, max: 10, message: '用户名在2~10个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '用户名在6~15个字符之间', trigger: 'blur' }
        ],
        repassword: [{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: sameRule, trigger: 'blur' }]
      }

    }
  },
  // method
  methods: {
    register () {
      this.$refs.registerForm.validate(async (isOk) => {
        if (isOk) {
          await register(this.registerForm)
          this.$message.success('注册成功')
          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .form{

    width: 540px;
    height: 560px;
    margin: 230px auto;
    // background-color: skyblue;
    .form-card{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      h1{
        text-align: center;
      }

      .form-register{
        margin-left: 45%;
        text-decoration: none;
        text-align: center;
        font-size: 16px;
        color: blue;
        line-height: 24px;
        font-weight: 400;

      }
      .form-register:hover{
        color: #4F81FF;
      }
      .el-input{
        width: 420px;
        height: 48px;

      }
      .el-button{
        background: #4F81FF;
        color: #FFFFFF;
        width: 420px;
        height: 48px;
        border-radius: 4px;
      }
      .el-button:hover{
        background: #608DFF;
      }
    }
  }

</style>
